#{extends 'tags/layouts/main.html' /}
#{set title:'Profile' /}

<div class="media media-profile">
    <a href="javascript:;" class="pull-left">
        <img src="${wall.user.photo}" alt="" class="media-object rounded-corner">
    </a>
    <div class="media-body">
        <h5 class="media-heading">${wall.user.firstname} ${wall.user.lastname}</h5>
        <p>${wall.user.description}</p>
    </div>
</div>
                                    
<ul class="nav nav-tabs nav-tabs-inverse nav-justified nav-justified-mobile">
    <li class="active"><a href=""><i class="fa fa-edit m-r-5"></i> <span class="hidden-xs">Posts</span></a></li>
    <li class=""><a href="@@{Profile.journey(wall.user.user_id)}"><i class="fa fa-paper-plane m-r-5"></i> <span class="hidden-xs">Journey</span></a></li>
    <li class=""><a href="@@{Profile.point(wall.user.user_id)}"><i class="fa fa-map-marker m-r-5"></i> <span class="hidden-xs">Points</span></a></li>
</ul>

<div class="panel panel-inverse">
    <div class="panel-toolbar">
        <div class="btn-group m-r-5">
            <a class="btn btn-white" href="javascript:;"><i class="fa fa-bold"></i></a>
            <a class="btn btn-white active" href="javascript:;"><i class="fa fa-italic"></i></a>
            <a class="btn btn-white" href="javascript:;"><i class="fa fa-underline"></i></a>
        </div>
        <div class="btn-group">
            <a class="btn btn-white" href="javascript:;"><i class="fa fa-align-left"></i></a>
            <a class="btn btn-white active" href="javascript:;"><i class="fa fa-align-center"></i></a>
            <a class="btn btn-white" href="javascript:;"><i class="fa fa-align-right"></i></a>
            <a class="btn btn-white" href="javascript:;"><i class="fa fa-align-justify"></i></a>
        </div>
    </div>
    <textarea class="form-control no-rounded-corner bg-silver" rows="14">Bạn đang nghĩ gì?</textarea>
    <div class="panel-footer text-right">
        <a href="javascript:;" class="btn btn-white btn-sm">Cancel</a>
        <a href="javascript:;" class="btn btn-primary btn-sm m-l-5">Post</a>
    </div>
</div>
                    
<!-- begin timeline -->
<ul class="timeline">
    #{list items:wall.updates, as:'updates'}
    <li>
        <!-- begin timeline-time -->
        <div class="timeline-time">
            <span class="date">${updates.strDate}</span>
            <span class="time">${updates.strTime}</span>
        </div>
        <!-- end timeline-time -->
        <!-- begin timeline-icon -->
        <div class="timeline-icon">
            <a href="javascript:;"><i class="fa fa-paper-plane"></i></a>
        </div>
        <!-- end timeline-icon -->
        <!-- begin timeline-body -->
        <div class="timeline-body">
            <div class="timeline-content">
                <p>${updates.update}</p>
            </div>
            <div class="timeline-footer">
                <a href="javascript:;" class="m-r-15"><i class="fa fa-thumbs-up fa-fw"></i> Like</a>
                <a href="javascript:;"><i class="fa fa-comments fa-fw"></i> Comment</a>
            </div>
        </div>
        <!-- end timeline-body -->
    </li>
    #{/list}
    
    *{<li>
        <!-- begin timeline-icon -->
        <div class="timeline-icon">
            <a href="javascript:;"><i class="fa fa-spinner"></i></a>
        </div>
        <!-- end timeline-icon -->
        <!-- begin timeline-body -->
        <div class="timeline-body">
            Loading...
        </div>
        <!-- begin timeline-body -->
    </li>}*
</ul>
<!-- end timeline -->
